<template>
  <div class="my-menu">
    <div class="menu-head">
      <div class="title">常用菜单</div>
      <div class="more" @click="showMore">更多 >></div>
    </div>
    <div class="menu-cont" v-loading="loadObj.menu">
      <template v-for="item in menuArr">
        <div class="menu-item" :title="item.name">
          <div class="menu-icon-box" @click="openPage(item.url)">
            <!-- <img :src="item.icon96 || item.icon64 || testUrl" > -->
            <img :src="item.icon16" alt=""
              v-if="item.icon16.slice(0, 4) == 'http' || item.icon16.slice(0, 4) == 'data'">
            <i class="awsui-iconfont" :style="{ color: item.icon16.split('|')[1] }" v-else>{{
            entityToChar(item.icon16.slice(0,
              item.icon16.indexOf('|'))) }}</i>
          </div>
          <div class="menu-title">{{ item.name }}</div>
        </div>
      </template>
      <div class="empty-text" v-if="isEmpty">暂无数据</div>
    </div>
    <el-dialog custom-class="custom-dialog" title="编辑常用菜单" :visible.sync="dialogVisible" width="8.4rem">
      <div class="dialog-body dialog-menu-body" v-loading="loadObj.dialog">
        <div class="dialog-menu-ul">
          <div class="dialog-menu-li" v-for="(item, index) in menuArr">
            <div class="menu-li-top">
              <i class="menu-del-icon el-icon-minus" @click="removeCommonMenuFn(item.functionId)"></i>
              <i class="menu-left-icon el-icon-arrow-left" v-if="index > 0"
                @click="sortCommonMenuFn(item.functionId, index - 1)"></i>
              <i class="menu-right-icon el-icon-arrow-right" @click="sortCommonMenuFn(item.functionId, index + 1)"
                v-if="index < menuArr.length && menuArr.length > index + 1"></i>
            </div>
            <div class="menu-li-center" @click="openPage(item.url)">
              <img :src="item.icon16" alt=""
                v-if="item.icon16.slice(0, 4) == 'http' || item.icon16.slice(0, 4) == 'data'">
              <i class="awsui-iconfont" :style="{ color: item.icon16.split('|')[1] }" v-else>{{
              entityToChar(item.icon16.slice(0,
                item.icon16.indexOf('|'))) }}</i>
            </div>
            <div class="menu-li-bottom" :title="item.name.length > 5 ? item.name : ''">{{ item.name }}</div>
          </div>
        </div>
        <div class="empty-text" v-if="isEmpty">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCommonMenuApi, addCommonMenuApi, sortCommonMenuApi } from "../api/myHome"
export default {
  name: '',
  mixins: [],
  components: {
  },
  props: {
  },
  data() {
    return {
      sid: this._sid,
      dialogVisible: false,
      testUrl: require("../assets/img/myHome/test.png"),
      menuArr: [
        // { title: '移动设备', "url": require("../assets/img/myHome/test.png")},
        // { title: '会议室维护', "url": require("../assets/img/myHome/test.png")},
        // { title: '印章维护', "url": require("../assets/img/myHome/test.png")},
        // { title: 'BAA 流程分析', "url": require("../assets/img/myHome/test.png")},
        // { title: '移动设备', "url": require("../assets/img/myHome/test.png")},
        // { title: '移动设备', "url": require("../assets/img/myHome/test.png")},
        // { title: '会议室维护', "url": require("../assets/img/myHome/test.png")},
        // { title: '印章维护', "url": require("../assets/img/myHome/task1.png")},
        // { title: 'BAA 流程分析', "url": require("../assets/img/myHome/task1.png")},
        // { title: '移动设备', "url": require("../assets/img/myHome/task1.png")},
        // { title: '移动设备', "url": require("../assets/img/myHome/task1.png")}
      ],
      isEmpty: false,
      loadObj: {
        menu: false,
        dialog: false
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getCommonMenuFn()
  },
  methods: {
    entityToChar(entity) {
      const txt = document.createElement('textarea');
      txt.innerHTML = entity;
      return txt.value;
    },
    showMore() {
      this.dialogVisible = true
    },
    getCommonMenuFn() {
      this.loadObj.menu = true
      getCommonMenuApi(this.sid).then(res => {
        if (res.result == "ok") {
          this.menuArr = res.data
          this.isEmpty = this.menuArr.length < 1
        }
        this.loadObj.menu = false
      })
    },
    removeCommonMenuFn(functionId) {
      this.loadObj.dialog = true
      addCommonMenuApi(this.sid, 'delete', functionId).then(res => {
        if (res.result == "ok") {
          this.$message({
            message: '移除常用功能成功',
            type: 'success'
          })
          this.loadObj.dialog = false
          this.getCommonMenuFn()
        }
      })
    },
    sortCommonMenuFn(oldId, index) {
      this.loadObj.dialog = true
      let newId = this.menuArr[index].functionId;
      sortCommonMenuApi(this.sid, oldId, newId).then(res => {
        if (res.result == "ok") {
          this.$message({
            message: '替换成功',
            type: 'success'
          })
          this.getCommonMenuFn()
        }
        this.loadObj.dialog = false
      })
    },
    openPage(url) {
      window.open(url);
    },
    removeCommonMenu(item) {

    }
  }
}
</script>

<style scoped lang="scss">
@import "../style/common.scss";
@import '../style/iconfont.css';

.my-menu {
  border-radius: $radius2;
  background-color: #f7f9fd;
  margin-top: 0.2rem;
  padding: $pad-insert;
  height: 3.25rem;

  .menu-head {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: $small-size;
      font-weight: bold;
    }

    .more {
      cursor: pointer;
      color: #5181e6;
      font-size: $min-size;

      i {
        color: #5181e6;
      }
    }
  }

  .menu-cont {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 0.1rem;
    height: 3rem;
    overflow: hidden;

    .menu-item {
      margin: 0.06rem 0.1rem;
      width: 1.12rem;
      cursor: pointer;
      // height: 0.78rem;
      overflow: hidden;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .menu-icon-box {
        border-radius: 0.05rem;
        // background-color: #e2eafa;
        width: 0.5rem;
        height: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding-right: 0.01rem;
        img {
          width: 0.35rem;
        }
      }

      .menu-title {
        font-size: $min-size;
        color: #6f7070;
        margin-top: 0.06rem;
        width: 1.11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.dialog-menu-body {
  height: 4rem;

  .dialog-menu-ul {
    font-size: $min-size;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    scrollbar-width: none;

    .dialog-menu-li {
      width: 1.18rem;
      margin-bottom: 0.3rem;

      .menu-li-top {
        display: flex;

        i {
          width: 0.2rem;
          height: 0.2rem;
          background-color: #2c64df;
          display: flex;
          border-radius: 100%;
          margin-right: 0.05rem;
          color: #fff;
          align-items: center;
          justify-content: center;
          font-size: 0.1rem;
          cursor: pointer;
        }

        .menu-del-icon {
          background-color: #cccccc;
        }
      }

      .menu-li-center {
        // background-color: #eaf0fc;
        border-radius: 0.08rem;
        // padding: 0.1rem;
        display: flex;
        justify-content: center;
        align-content: center;
        height: 0.5rem;
        width: 0.5rem;
        margin-top: 0.1rem;
        // margin-left: 0.05rem;
        box-sizing: border-box;

        img {
          height: 0.38rem;
          margin: auto;
          cursor: pointer;
        }
      }

      .menu-li-bottom {
        margin-top: 0.08rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
